<template>
  <div class="artists-container">
    <!-- 背景图片 -->
    <img src="@/assets/images/背景04.jpg" class="artists-bgc">
    <!-- 歌单信息区域 -->
    <div class="songs-box">
      <div class="songs-img"><img :src="artistInfo.cover"></div>
      <div class="songs-content">
        <div class="title">
          <div class="songs-title">
            <h1>{{ artistInfo.name }}</h1>
          </div>
          <div class="user">
            <p v-if="artistInfo.transNames">{{ artistInfo.transNames[0] }}</p>
          </div>
        </div>
        <div class="btn-songs">
          <!-- @click="collection" -->
          <div class="star">
            <i class="el-icon-folder-checked" v-if="true"></i>
            <i class="el-icon-folder-add" v-else></i>
            <span v-if="true"> 已收藏</span>
            <span v-else> 收藏</span>
          </div>
          <div v-if="userId != 0" class="down" @click="$router.push('/userprofiles/' + userId)">
            <i class="iconfont icon-geshou"></i>
            <span>个人主页</span>
          </div>
        </div>
        <div class="songs-synopsis">
          <p>单曲数：{{ artistInfo.musicSize }}</p>
          <p>专辑数：{{ artistInfo.albumSize }}</p>
          <p>MV数：{{ artistInfo.mvSize }}</p>
        </div>
      </div>
      <!-- 控制显示模式按钮盒子 -->
      <div class="change-modo-btns" v-show="activeName == 'first'">
        <span @click="changeCardModo"
          :class="{ 'iconfont': 1, 'icon-dasuolvetuliebiao': 1, 'select': modo == 'card' }"></span>
        <span @click="changeListModo"
          :class="{ 'iconfont': 1, 'icon-shitu-liebiao': 1, 'select': modo == 'list' }"></span>
        <span @click="modo = 'detail'"
          :class="{ 'iconfont': 1, 'icon-relituliebiao': 1, 'select': modo == 'detail' }"></span>
      </div>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!-- 专辑展示区域-------------------------------------------------------------------------- -->
      <el-tab-pane label="专辑" name="first">
        <!-- 歌曲形式展示 -->
        <div v-show="modo == 'detail'" class="detail-modo">
          <div class="songs-info-box">
            <!-- 左侧大图片 -->
            <div class="songs-img">
              <img src="@/assets/images/TOP50.png">
            </div>
            <!-- 右侧歌曲展示区域 -->
            <div class="songs-detail">
              <!-- title区域 -->
              <div class="songs-detail-title">
                <h1>热门50首</h1>
                <span class="el-icon-video-play"></span>
                <span class="shu">|</span>
                <span class="el-icon-folder-add"></span>
              </div>
              <div class="songs-table">
                <!-- 展示歌曲表格区域  -->
                <el-table :data="hotSongs10" style="width: 100%" lazy size="mini" :show-header="false"
                  @row-dblclick="getHotSong">
                  <el-table-column type="index" width="50" align="center"></el-table-column>
                  <el-table-column width="80">
                    <template slot-scope="{row}">
                      <div class="control">
                        <span class="iconfont icon-xihuan" @click="addmyLove(row)"></span>
                        <span class="iconfont icon-xiazai" @click="download(row)"></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="width" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <div class="title-tags">
                        <span class="song-title">{{ row.name }}<i v-if="row.alia.length > 0">({{ row.alia[0]
                        }})</i></span>
                        <div class="tags">
                          <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                          <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                          <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                            @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                          <i v-if="row.pc" class="el-icon-cloudy"></i>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="dt" width="80"></el-table-column>
                </el-table>
                <!-- 显示全部歌曲 -->
                <div v-if="hotSongs10.length == 10" class="show-all"><span @click="checkAllSongs">查看全部50首 ></span></div>
              </div>
            </div>
          </div>
          <!-- 专辑展示区域 -->
          <div class="songs-info-box" v-for="(item, i) in albums" :key="i">
            <!-- 左侧大图片 -->
            <div class="songs-img">
              <div>
                <img :src="item.picUrl">
                <span class="iconfont icon-zhuanji1"></span>
                <span class="create-time">{{ item.publishTime | formatTime }}</span>
              </div>
            </div>
            <!-- 右侧歌曲展示区域 -->
            <div class="songs-detail">
              <!-- title区域 -->
              <div class="songs-detail-title">
                <h1 @click="$router.push('/albums/' + item.id)">{{ item.name }}</h1>
                <span class="el-icon-video-play"></span>
                <span class="shu">|</span>
                <span class="el-icon-folder-add"></span>
              </div>
              <div class="songs-table">
                <!-- 展示歌曲表格区域 -->
                <el-table :data="item.songs" style="width: 100%" lazy size="mini" :show-header="false"
                  @row-dblclick="(row, col, e) => getSongInfo(row, col, e, i)">
                  <el-table-column type="index" width="50" align="center"></el-table-column>
                  <el-table-column width="80">
                    <template slot-scope="{row}">
                      <div class="control">
                        <!--   -->
                        <span class="iconfont icon-xihuan" @click="addmyLove(row)"></span>
                        <span class="iconfont icon-xiazai" @click="download(row)"></span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column width="width" show-overflow-tooltip>
                    <template slot-scope="{row}">
                      <div class="title-tags">
                        <span class="song-title">{{ row.name }}<i v-if="row.alia.length > 0">({{ row.alia[0]
                        }})</i></span>
                        <div class="tags">
                          <el-tag v-if="row.fee == 1" effect="plain" size="mini" class="vip-tag">VIP</el-tag>
                          <el-tag v-if="row.sq" effect="plain" size="mini" class="sq-tag">SQ</el-tag>
                          <el-tag v-if="row.mv" effect="plain" size="mini" class="sq-tag"
                            @click="$router.push('/mv/' + row.mv)">MV<i class="el-icon-caret-right"></i></el-tag>
                          <i v-if="row.pc" class="el-icon-cloudy"></i>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="dt" width="80"></el-table-column>
                </el-table>
                <!-- 显示全部歌曲 -->
                <div v-if="item.songs && item.songs.length == 10" class="show-all"><span
                    @click="$router.push('/albums/' + item.id)">查看全部{{ item.size }}首 ></span></div>
              </div>
            </div>
          </div>
        </div>
        <!-- 歌曲形式展示 -->

        <!-- 卡片形式展示 -->
        <div v-if="modo == 'card'" class="card-modo">
          <div class="card-item" v-for="(item, index) in albums" :key="index">
            <div class="album-img">
              <img :src="item.picUrl" @click="$router.push('/albums/' + item.id)">
              <span class="iconfont icon-zhuanji1"></span>
              <div class="play" @click="getSongsUrlAndList(item)"><i class="iconfont icon-bofangzanting-"></i></div>
            </div>
            <p>{{ item.name }}<span v-show="item.alias && item.alias.length > 0">({{ item.alias[0] }})</span></p>
            <span class="create-time">{{ item.publishTime | formatTime }}</span>
          </div>
        </div>
        <!-- 卡片形式展示 -->

        <!-- 列表形式展示 -->
        <div v-if="modo == 'list'" class="list-modo">
          <div class="albums-item" v-for="(item, index) in albums" :key="index"
            @click="$router.push('/albums/' + item.id)">
            <div class="img">
              <img :src="item.picUrl">
              <span class="iconfont icon-zhuanji1"></span>
            </div>
            <div class="info">
              <p>{{ item.name }}<span v-if="item.alias.length > 0"> ({{ item.alias[0] }})</span></p>
              <span class="albums-artists">{{ item.size }} 首</span>
              <span class="albums-time">发行时间：{{ item.publishTime | formatTime }}</span>
            </div>
          </div>
        </div>
        <!-- 列表形式展示 -->
      </el-tab-pane>
      <!-- MV展示区域-------------------------------------------------------------------------- -->
      <el-tab-pane label="MV" name="second">
        <div class="mv-list">
          <div class="mv-item" v-for="(mv, i) in mvList" :key="i">
            <div class="mv-img" @click="$router.push('/mv/' + mv.id)">
              <img :src="mv.imgurl">
              <span class="play-count"><i class="el-icon-caret-right"></i>{{ mv.playCount > 100000 ? (mv.playCount
              / 10000).toFixed(0) +
              '万' : mv.playCount
              }}</span>
              <span class="mv-time">{{ mv.duration | Format }}</span>
            </div>
            <p class="mv-name">
              <el-tag type="danger" size="mini">MV</el-tag>
              <span>{{ mv.name }}</span>
            </p>
          </div>
        </div>
      </el-tab-pane>
      <!-- 歌手详情展示区域-------------------------------------------------------------------------- -->
      <el-tab-pane label="歌手详情" name="third">
        <div class="artist-desc">
          <h3>{{ artistInfo.name }}简介</h3>
          <p>{{ artistDesc.briefDesc }}</p>
        </div>
        <div class="artist-desc" v-for="(item, index) in artistDesc.introduction" :key="index">
          <h3>{{ item.ti }}</h3>
          <p v-for="(txt, i) in item.txt" :key="i">{{ txt }}</p>
        </div>
      </el-tab-pane>
      <!-- 相似歌手展示区域-------------------------------------------------------------------------- -->
      <el-tab-pane label="相似歌手" name="fourth">
        <div class="like-artists">
          <div class="artists-item" v-for="(item, i) in likeArtists" :key="i"
            @click="$router.push(`/artists/${item.id}`)">
            <img :src="item.img1v1Url">
            <span>{{ item.name }}</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-backtop :bottom="150" :right="150">
      <div>
        <span class="iconfont icon-huidaodingbu" style="fontSize:26px;color:rgb(96, 56, 207)"></span>
      </div>
    </el-backtop>
  </div>
</template>

<script>
import axios from '@/request/request'
export default {
  data() {
    return {
      // 歌手信息
      artistInfo: {},
      // 该歌手个人Id
      userId: 0,
      // 歌手描述
      artistDesc: {},
      // tabs栏绑定参数
      activeName: 'first',
      // 歌手热么50首
      hotSongs: [],
      // 前10首
      hotSongs10: [],
      // 用于获取专辑参数
      limit: 5,
      offset: 0,
      albums: [],
      flag: false,
      // 相似歌手
      likeArtists: [],
      // 控制显示模式参数
      modo: 'detail',
      mvList: [],
      page: 0,
      size: 20
    }
  },
  watch: {
    $route(val) {
      Object.assign(this.$data, this.$options.data.call(this))
      const id = val.params.id
      this.getArtistInfo(id)
      this.getArtistHotSong(id)
      this.getArtistAlbums(id)
    }
  },
  created() {
    const id = this.$route.params.id
    this.getArtistInfo(id)
    this.getArtistHotSong(id)
    this.getArtistAlbums(id)
  },
  mounted() {
    window.addEventListener('scroll', this.windowScroll, true)
  },
  filters: {
    // 处理歌曲时间函数
    Format(time) {
      let m = (time / 1000 / 60).toFixed(0)
      m = m < 10 ? '0' + m : m
      let s = (time / 1000 % 60).toFixed(0)
      s = s < 10 ? '0' + s : s
      return m + ':' + s

    },
  },
  methods: {
    // 获取歌手信息
    async getArtistInfo(id) {
      const { data: res } = await axios.get(`/artist/detail?id=${id}`)
      if (res.code == 200) {
        this.artistInfo = res.data.artist
        if (res.data.user) {
          this.userId = res.data.user.userId
        }
      }
    },
    // 获取歌手热门歌曲
    async getArtistHotSong(id) {
      const { data: res } = await axios.get(`/artists?id=${id}`)
      if (res.code == 200) {
        res.hotSongs.forEach(item => {
          item.dt = this.format(item.dt)
        })
        this.hotSongs = res.hotSongs
        this.hotSongs10 = res.hotSongs.slice(0, 10)
      }
    },
    // 获取歌手专辑
    async getArtistAlbums(id, flag) {
      if (flag) this.flag = false
      const timestamp = +new Date()
      const { data: res } = await axios.get(`/artist/album?id=${id}&limit=${this.limit}&offset=${this.offset}&timestamp=${timestamp}`)
      if (res.code == 200) {
        res.hotAlbums.forEach(async item => {
          item.songs = await this.getAlbumSongs(item.id)
        })
        this.albums.push(...res.hotAlbums)
        this.$nextTick(() => {
          this.flag = true
        })
      }
    },
    // 获取专辑前10首歌曲
    async getAlbumSongs(id) {
      const { data: res } = await axios.get(`/album?id=${id}`)
      if (res.code == 200) {
        res.songs.forEach(item => {
          item.dt = this.format(item.dt)
        })
        return res.songs.slice(0, 10)
      }
    },
    // window滚动事件处理函数
    windowScroll() {
      if (!this.flag) return
      const html = document.documentElement
      if (html.scrollHeight - html.scrollTop <= html.clientHeight + 100) {
        const flag = true
        if (this.activeName == 'first' && this.offset * this.limit < this.artistInfo.albumSize) {
          this.offset += 1
          this.getArtistAlbums(this.artistInfo.id, flag)
        } else if (this.activeName == 'second' && this.page * this.size < this.artistInfo.mvSize) {
          this.page += 1
          this.getMvList(this.artistInfo.id, flag)
        }
      }
    },
    // 格式化歌曲毫秒数
    format(dt) {
      let m = parseInt(dt / 1000 / 60)
      let s = ((dt / 1000) % 60).toFixed(0)
      if (m < 10) {
        m = '0' + m
      }
      if (s < 10) {
        s = '0' + s
      }
      return m + ':' + s
    },
    // 查看全部50首
    checkAllSongs() {
      this.hotSongs10 = this.hotSongs
    },
    // 表格行双击事件，获取音乐播放地址
    getSongInfo(row, col, e, index) {
      this.$store.dispatch('audio/getSongUrl', row)
      this.$store.dispatch('audio/getAlbumSongs', this.albums[index].id)
    },
    getHotSong(row) {
      this.$store.dispatch('audio/getSongUrl', row)
      this.$store.commit('audio/updateNowPlayList', this.hotSongs)
    },
    // 获取歌手Mv
    async getMvList(id, flag) {
      if (flag) this.flag = false
      const timestamp = +new Date()
      const { data: res } = await axios.get(`/artist/mv?id=${id}&offset=${this.page}&limit=${this.size}&timestamp=${timestamp}`)
      if (res.code == 200) {
        this.mvList.push(...res.mvs)
        this.$nextTick(() => {
          this.flag = true
        })
      }
    },
    // tab栏点击触发函数
    handleClick() {
      if (this.activeName == 'third') {
        this.getArtistDetail()
      } else if (this.activeName == 'fourth') {
        this.getLikeArtists()
      } else if (this.activeName == 'second') {
        this.getMvList(this.artistInfo.id)
      }
    },
    // 获取歌手描述
    async getArtistDetail() {
      const { data: res } = await axios.get(`/artist/desc?id=${this.artistInfo.id}`)
      if (res.code == 200) {
        res.introduction.forEach(item => {
          item.txt = item.txt.split('\n')
        })
        this.artistDesc = res
      }
    },
    // 获取相似歌手列表
    async getLikeArtists() {
      const { data: res } = await axios.get(`/simi/artist?id=${this.artistInfo.id}`)
      if (res.code == 200) {
        this.likeArtists = res.artists
      }
    },
    // 添加到我的喜欢音乐
    async addmyLove(row) {
      const timestamp = +new Date()
      const { data: res } = await axios.post(`/like?id=${row.id}&timestamp=${timestamp}`)
      if (res.code == 200) {
        this.$message.success('喜欢成功')
      }
    },
    // 点击获取下载链接
    async download(row) {
      const { data: res } = await axios.get(`/song/download/url?id=${row.id}`)
      if (res.code == 200) {
        this.$download(res)
      }
    },
    // 点击切换卡片显示模式
    changeCardModo() {
      this.modo = 'card'
      if (this.albums.length < 10) {
        this.offset += 5
        this.getArtistAlbums(this.artistInfo.id, this.modo)
      }
    },
    // 点击切换卡片显示模式
    changeListModo() {
      this.modo = 'list'
      if (this.albums.length < 10) {
        this.offset += 5
        this.getArtistAlbums(this.artistInfo.id, this.modo)
      }
    },
    // 卡片模式播放按钮，播放该专辑第一首音乐并获取该专辑所有音乐更新播放列表
    getSongsUrlAndList(item) {
      this.$store.dispatch('audio/getSongUrl', item.songs[0])
      this.$store.dispatch('audio/getAlbumSongs', item.id)
    }
  }
}
</script>

<style lang="less" scoped>
@media screen and (max-width:1500px) {
  .artists-container {
    width: 70% !important;
  }
}

@media screen and (max-width:1000px) {
  .artists-container {
    width: 100% !important;
  }
}

/deep/ .el-table {
  background-color: transparent;
}

/deep/ .el-table__expanded-cell {
  background-color: transparent;

}

/deep/ .el-table tr {
  background-color: transparent;
}

/deep/ .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none;
}

/deep/ .el-table th.el-table__cell {
  background-color: transparent;
}

.artists-container {
  box-sizing: border-box;
  padding: 15px 20px;
  width: 50%;
  margin: 0 auto;
  margin-top: 3.7%;
  cursor: default;
  border-radius: 10px;
  background-color: rgba(#fff, 0.75);

  .artists-bgc {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }

  // 歌单信息
  .songs-box {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 230px;
    // background-color: pink;
    padding: 10px 0;
    margin-bottom: 20px;
    text-align: start;
    cursor: default;

    // 控制显示模式按钮盒子
    .change-modo-btns {
      z-index: 500;
      position: absolute;
      right: 15px;
      bottom: -55px;
      border-radius: 3px;
      height: 24px;
      overflow: hidden;
      background-color: rgb(227, 227, 227);

      span {
        display: inline-block;
        height: 100%;
        padding: 0 8px;
        line-height: 24px;
        color: rgb(156, 156, 156);

        &:hover {
          background-color: rgb(192, 192, 192);
        }

        &.select {
          background-color: rgb(192, 192, 192);
        }
      }

      .icon-shitu-liebiao {
        border-left: 1px solid rgb(255, 255, 255);
        border-right: 1px solid rgb(255, 255, 255);
      }

    }


    .songs-img {
      width: 25%;
      height: 100%;
      border-radius: 8px;
      overflow: hidden;

      // background-color: rgb(146, 109, 109);
      img {
        width: 100%;
        height: 100%;
      }
    }

    .songs-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 73%;
      height: 65%;

      // background-color: rgb(206, 52, 52);
      .title {
        display: flex;
        flex-direction: column;

        .songs-title {
          display: flex;
          align-items: center;

          h1 {
            margin: 0;
            font-size: 25px;
          }
        }

        .user {
          display: flex;
          align-items: center;
          font-size: 14px;
          margin-top: 10px;
          cursor: default;

          p {
            margin: 0;
            color: #444444;
          }

        }
      }

      .btn-songs {
        display: flex;
        width: 100%;
        // justify-content: space-between;
        padding-right: 40px;
        cursor: default;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        .star {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          border: 1px solid rgb(192, 192, 192);
          padding: 0 15px;
          border-radius: 17px;
          font-size: 14px;
          transition: all 0.3s;

          &:hover {
            background-color: #eaeaea;

          }

          .el-icon-folder-checked {
            font-size: 20px;
            margin-right: 3px;
            transform: translateY(1px);
          }

          .el-icon-folder-add {
            font-size: 20px;
            margin-right: 3px;
            transform: translateY(1px);
          }
        }


        .down {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          border-radius: 17px;
          padding: 0 15px;
          margin-left: 10px;
          font-size: 14px;
          border: 1px solid rgb(192, 192, 192);
          transition: all 0.3s;

          &:hover {
            background-color: #eaeaea;

          }

          .icon-geshou {
            font-size: 18px;
            font-weight: 700;
          }
        }
      }

      .songs-synopsis {
        display: flex;
        cursor: default;

        p {
          margin: 4px 0;
          margin-right: 15px;
          font-size: 14px;
        }
      }
    }
  }

  // 歌曲形式展示区域
  .detail-modo {
    .songs-info-box {
      display: flex;
      justify-content: space-between;
      width: 100%;
      margin-bottom: 50px;

      .songs-img {
        width: 20%;

        img {
          position: relative;
          z-index: 20;
          width: 200px;
          height: 200px;
          border-radius: 6px;
          overflow: hidden;
        }

        div {
          position: relative;
          width: 200px;
          height: 200px;

          .icon-zhuanji1 {
            z-index: 10;
            position: absolute;
            top: 50%;
            right: -90px;
            transform: translateY(-50%);
            font-size: 150px;
          }

          .create-time {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: -20px;
            color: rgb(159, 158, 158);
            font-size: 15px;
          }
        }

      }

      .songs-detail {
        width: 70%;

        .songs-detail-title {
          display: flex;
          // justify-content: space-between;
          align-items: center;
          width: 100%;
          margin-bottom: 10px;

          h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 550;
            margin-right: 20px;
            color: rgb(57, 57, 57);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          .shu {
            color: rgb(200, 200, 200);
            font-size: 14px;
            margin: 0 10px;
          }

          .el-icon-video-play,
          .el-icon-folder-add {
            font-size: 22px;
            line-height: 24px;
            color: rgb(115, 115, 115);
          }
        }

        .songs-table {

          // 表格区域样式
          .control {
            // display: flex;
            // justify-content: space-between;
            // width: 80%;

            .icon-xiazai {
              font-size: 20px;
              margin-left: 5px;

              &:hover {
                font-weight: 700;
              }
            }

            .icon-xihuan {
              &:hover {
                font-weight: 700;
              }
            }
          }

          .title-tags {
            display: flex;

            .tags {
              display: flex;
              align-items: center;

              .vip-tag {
                color: #d83b55;
                border: 1px solid #d83b55;
                margin-left: 3px;
              }

              .sq-tag {
                color: #962ed6;
                border: 1px solid #962ed6;
                margin-left: 3px;
              }

              /deep/ .el-icon-cloudy {
                font-size: 20px;
                // transform: translateY(4px);
                margin-left: 3px;
              }
            }

            .song-title {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              i {
                color: #9e9d9d;
                font-style: normal;
              }
            }
          }

          .show-all {
            height: 36px;
            line-height: 36px;
            font-size: 13px;
            padding-right: 37px;
            color: rgb(181, 181, 181);
            text-align: right;
            background-color: rgb(246, 246, 246);

            &:hover {
              color: rgb(140, 140, 140);

            }
          }
        }
      }
    }
  }

  // 卡片形式展示区域
  .card-modo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 96%;

    .card-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 22%;
      height: 275px;
      margin-bottom: 20px;

      .album-img {
        position: relative;
        width: 100%;
        height: 200px;

        &:hover .play {
          opacity: 1;
        }

        img {
          z-index: 20;
          position: relative;
          width: 100%;
          height: 200px;
          overflow: hidden;
          border-radius: 8px;
          background-color: #fff;
        }

        .icon-zhuanji1 {
          z-index: 10;
          position: absolute;
          top: 50%;
          right: -90px;
          transform: translateY(-50%);
          font-size: 160px;
        }

        .play {
          opacity: 0;
          transition: all 0.8s;
          z-index: 30;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.9);
          text-align: center;
          line-height: 60px;

          .icon-bofangzanting- {
            color: rgb(122, 21, 217);
            font-size: 40px;
          }
        }
      }

      p {
        height: 40px;
        text-align: start;
        font-size: 15px;
        margin: 10px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        /* 3.设置盒子属性为-webkit-box  必须的 */
        display: -webkit-box;
        /* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
        -webkit-line-clamp: 2;
        /* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
        word-break: break-all;
        /* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
        -webkit-box-orient: vertical;

        span {
          color: rgb(185, 185, 185);
        }
      }

      .create-time {
        font-size: 15px;
        color: rgb(185, 185, 185);
      }
    }
  }

  // 列表模式显示区域
  .list-modo {
    width: 100%;

    .albums-item {
      display: flex;
      align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 80px;
      padding: 10px 20px;
      text-align: start;

      &:hover {
        background-color: rgb(243, 243, 243);
      }

      .img {
        position: relative;
        margin-right: 30px;
        width: 60px;
        height: 60px;

        img {
          width: 60px;
          height: 60px;
          border-radius: 5px;
          z-index: 10;
        }

        .icon-zhuanji1 {
          position: absolute;
          top: 50%;
          right: -30px;
          transform: translateY(-50%);
          font-size: 50px;
          z-index: 1;
          color: rgb(0, 0, 0);
        }
      }

      .info {
        display: flex;
        align-items: center;
        width: 90%;
        // justify-content: space-between;

        p {
          width: 50%;
          color: rgb(32, 32, 32);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          span {
            color: rgb(191, 191, 191);
          }
        }

        .albums-artists {
          width: 15%;
          font-size: 12px;
          color: rgb(163, 163, 163);
          text-align: center;
        }

        .albums-time {
          width: 35%;
          font-size: 12px;
          color: rgb(163, 163, 163);
          white-space: nowrap;
          text-align: right;
        }
      }
    }
  }

  // 视频展示区域
  .mv-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;

    .mv-item {
      width: 30%;
      height: 190px;
      text-align: start;
      margin-bottom: 20px;
      // background-color: pink;

      .mv-img {
        position: relative;
        width: 100%;
        height: 150px;
        border-radius: 4px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          transition: all 0.5s;

          &:hover {
            transform: scale(1.2);
          }
        }

        .play-count {
          position: absolute;
          top: 5px;
          right: 10px;
          color: rgb(255, 255, 255);
          font-size: 13px;


          .el-icon-caret-right {
            font-size: 15px;
          }
        }

        .mv-time {
          position: absolute;
          bottom: 5px;
          right: 10px;
          font-size: 13px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: rgb(255, 255, 255);
        }
      }

      .mv-name {
        margin: 0;
        text-align: start;
        font-size: 13px;
        margin-top: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .arname {
        display: inline-block;
        margin-top: 5px;
        font-size: 13px;
        color: rgb(214, 214, 214);
      }

      /deep/ .el-tag--mini {
        box-sizing: border-box;
        height: 14px;
        line-height: 14px;
        padding: 0 2px;
        margin-right: 3px;
      }
    }
  }

  // 歌手描述样式
  .artist-desc {
    text-align: start;
    margin-bottom: 50px;

    h3 {
      font-size: 16px;
    }

    p {
      text-indent: 2em;
      font-size: 15px;
      line-height: 35px;
      color: rgb(96, 96, 96);
    }
  }

  // 相似歌手区域描述
  .like-artists {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;

    .artists-item {
      width: 18%;
      height: 200px;
      margin-bottom: 20px;
      // background-color: pink;
      text-align: start;

      img {
        width: 100%;
        height: 85%;
        border-radius: 6px;
        overflow: hidden;
      }

      span {
        font-size: 15px;
      }
    }

  }

  /deep/ .el-tabs__item:hover {
    color: #962ed6;
  }

  /deep/ .el-tabs__item.is-active {
    color: #962ed6;
    font-size: 20px;
    font-weight: 700;
  }

  /deep/ .el-tabs__active-bar {
    background-color: #962ed6;
    height: 4px;
  }

  /deep/ .el-tabs__nav-wrap::after {
    height: 0;
  }

  /deep/ .el-tag--mini {
    height: 16px;
    line-height: 16px;
    padding: 0 2px;
  }

  /deep/ .el-table--mini {
    font-size: 14px;
  }
}
</style>